<!DOCTYPE html>
<html>
	<head>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta charset="utf-8">
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
		<meta name="keywords" content="百度地图,百度地图API，百度地图自定义工具，百度地图所见即所得工具" />
		<meta name="description" content="百度地图API自定义地图，帮助用户在可视化操作下生成百度地图" />
		<title>contact</title>
		<link href="../css/bootstrap.min.css" rel="stylesheet" />
		<link href="../css/contact.css" rel="stylesheet" />
		<link href="../css/mycom.css" rel="stylesheet" />
		<!--引用百度地图API-->
		<style type="text/css">
			html,
			body {
				margin: 0;
				padding: 0;
			}

			.iw_poi_title {
				color: #CC5522;
				font-size: 14px;
				font-weight: bold;
				overflow: hidden;
				padding-right: 13px;
				white-space: nowrap
			}

			.iw_poi_content {
				font: 12px arial, sans-serif;
				overflow: visible;
				padding-top: 4px;
				white-space: -moz-pre-wrap;
				word-wrap: break-word
			}

			#dituContent {
				width: 100%;
				height: 306px;
				border: #ccc solid 1px;
				margin: 60px auto 80px;
			}
		</style>
		<script type="text/javascript" src="http://api.map.baidu.com/api?key=&v=1.1&services=true"></script>
	</head>
	<body>
		<nav class="navbar navbar-default navbar-fixed-top">
			<div class="container">
				<div class="navbar-header">
					<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false"
					 aria-controls="navbar">
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					</button>
					<img style="height: 40px;margin-top: 5px;margin-right: 150px;" src="../images/图层676.png" />
				</div>
				<div id="navbar" class="navbar-collapse collapse" aria-expanded="false" style="height: 1px;">
					<ul class="nav navbar-nav">
						<li class="item">
							<a class="a" href="../index.html">首页</a>
						</li>
						<li class="item">
							<a id="click" href="service.html" class="dropdown-toggle" data-toggle="dropdown">服务</a>
							<ul class="dropdown-menu">
								<li>
									<a href="service(html).html">网页开发</a>
								</li>
								<li>
									<a href="service(app).html">APP开发</a>
								</li>
								<li>
									<a href="service(wx).html">微信开发</a>
								</li>
							</ul>
						</li>
						<li class="item ">
							<a href="product.html">案例</a>
						</li>
						<li class="item ">
							<a href="news.html">新闻中心</a>
						</li>
						<li class="item">
							<a href="about.html">关于我们</a>
						</li>
						<li class="item activea">
							<a href="#">联系我们</a>
						</li>
					</ul>
					<div style="float: right;display: flex;flex-direction: row;align-items: center;height: 50px;" class=" class="
					 hidden-sm hidden-xs"">
						<img src="../images/phone.png" />
						<p style="margin: 0 10px;">0592-123456</p>
						<img src="../images/wechat.png" />
					</div>
				</div>
			</div>
		</nav>

		<!-- <div class="container-fluid"> -->
		<img class="banner" src="../images/图层512拷贝4.png" />
		<!-- </div> -->

		<div class="container container-box">
			<div class="text-box">
				<p class="page-title">CONTACT</p>
				<p class="page-tip">联系我们</p>
			</div>
			<div class="box-flex-between">
				<div class="contact-box">
					<div class="self-box">
						<p class="company">福建兜优</p>
						<ul class="list-unstyled contact-list">
							<li>Tel：020-000000</li>
							<li>Mobile：13000000000</li>
							<li>QQ：255555555</li>
							<li>Email：255555555@qq.com</li>
							<li>Address：XX省XX市XX区XX路XX号XX楼</li>
						</ul>
					</div>
				</div>
				<div class="contact-box hidden-xs">
					<form>
						<div class="input-line">
							<label>姓名</label><input type="text" name="name" />
						</div>
						<div class="input-line">
							<label>手机</label><input type="number" name="tel" />
						</div>
						<div class="textarea-line">
							<label>内容</label><textarea></textarea>
						</div>
						<button class="btn btn1">提交</button>
					</form>
				</div>
			</div>
			<div class="contact-box hidden-lg hidden-sm hidden-md form-box2">
				<form>
					<div class="input-line">
						<label>姓名</label><input type="text" name="name" />
					</div>
					<div class="input-line">
						<label>手机</label><input type="number" name="tel" />
					</div>
					<div class="textarea-line">
						<label>内容</label><textarea></textarea>
					</div>
					<div class="btn-line">
						<button class="btn btn2">提交</button>
					</div>
				</form>
			</div>
			<!--百度地图容器-->
			<div style="" id="dituContent"></div>
		</div>
		<div class="foot"></div>
	</body>
	<script src="../js/jquery-3.3.1.min.js"></script>
	<script src="../js/bootstrap.min.js"></script>
	<script>
		$(".item").click(function() {
			$(this).addClass("activea").siblings().removeClass("activea");
		})
		$(function() {
			$(".foot").load("footer.html");
		})

		$("#click").click(function() {
			window.location.href = "service.html";
		})
	</script>
	<script type="text/javascript">
		//创建和初始化地图函数：
		function initMap() {
			createMap(); //创建地图
			setMapEvent(); //设置地图事件
			addMapControl(); //向地图添加控件
			addMarker(); //向地图中添加marker
		}

		//创建地图函数：
		function createMap() {
			var map = new BMap.Map("dituContent"); //在百度地图容器中创建一个地图
			var point = new BMap.Point(118.192756, 24.489895); //定义一个中心点坐标
			map.centerAndZoom(point, 17); //设定地图的中心点和坐标并将地图显示在地图容器中
			window.map = map; //将map变量存储在全局
		}

		//地图事件设置函数：
		function setMapEvent() {
			map.enableDragging(); //启用地图拖拽事件，默认启用(可不写)
			map.enableScrollWheelZoom(); //启用地图滚轮放大缩小
			map.enableDoubleClickZoom(); //启用鼠标双击放大，默认启用(可不写)
			map.enableKeyboard(); //启用键盘上下左右键移动地图
		}

		//地图控件添加函数：
		function addMapControl() {
			//向地图中添加缩放控件
			var ctrl_nav = new BMap.NavigationControl({
				anchor: BMAP_ANCHOR_TOP_LEFT,
				type: BMAP_NAVIGATION_CONTROL_LARGE
			});
			map.addControl(ctrl_nav);
			//向地图中添加缩略图控件
			var ctrl_ove = new BMap.OverviewMapControl({
				anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
				isOpen: 1
			});
			map.addControl(ctrl_ove);
			//向地图中添加比例尺控件
			var ctrl_sca = new BMap.ScaleControl({
				anchor: BMAP_ANCHOR_BOTTOM_LEFT
			});
			map.addControl(ctrl_sca);
		}

		//标注点数组
		var markerArr = [{
			title: "福建省厦门市湖里区软件园二期40号楼之一204",
			content: "我的备注",
			point: "118.192478|24.490158",
			isOpen: 0,
			icon: {
				w: 21,
				h: 21,
				l: 0,
				t: 0,
				x: 6,
				lb: 5
			}
		}];
		//创建marker
		function addMarker() {
			for (var i = 0; i < markerArr.length; i++) {
				var json = markerArr[i];
				var p0 = json.point.split("|")[0];
				var p1 = json.point.split("|")[1];
				var point = new BMap.Point(p0, p1);
				var iconImg = createIcon(json.icon);
				var marker = new BMap.Marker(point, {
					icon: iconImg
				});
				var iw = createInfoWindow(i);
				var label = new BMap.Label(json.title, {
					"offset": new BMap.Size(json.icon.lb - json.icon.x + 10, -20)
				});
				marker.setLabel(label);
				map.addOverlay(marker);
				label.setStyle({
					borderColor: "#808080",
					color: "#333",
					cursor: "pointer"
				});

				(function() {
					var index = i;
					var _iw = createInfoWindow(i);
					var _marker = marker;
					_marker.addEventListener("click", function() {
						this.openInfoWindow(_iw);
					});
					_iw.addEventListener("open", function() {
						_marker.getLabel().hide();
					})
					_iw.addEventListener("close", function() {
						_marker.getLabel().show();
					})
					label.addEventListener("click", function() {
						_marker.openInfoWindow(_iw);
					})
					if (!!json.isOpen) {
						label.hide();
						_marker.openInfoWindow(_iw);
					}
				})()
			}
		}
		//创建InfoWindow
		function createInfoWindow(i) {
			var json = markerArr[i];
			var iw = new BMap.InfoWindow("<b class='iw_poi_title' title='" + json.title + "'>" + json.title +
				"</b><div class='iw_poi_content'>" + json.content + "</div>");
			return iw;
		}
		//创建一个Icon
		function createIcon(json) {
			var icon = new BMap.Icon("../images/address.png", new BMap.Size(json.w, json.h), {
				imageOffset: new BMap.Size(-json.l, -json.t),
				infoWindowOffset: new BMap.Size(json.lb + 5, 1),
				offset: new BMap.Size(json.x, json.h)
			})
			return icon;
		}

		initMap(); //创建和初始化地图
	</script>
</html>
